<div class="content__title">
    <h1>Flot charts<small>ANGULAR2 D3 CHART FRAMEWORK</small></h1>
    <div>
        <div sparkline data-bar-color="#cfdbe2"
            data-height="20" data-bar-width="3" data-bar-spacing="2"
            values="1,0,4,6,5,7,8,3,5,7,8"></div>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Bar</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-bar-vertical
                        [results]="single"
                        [scheme]="colorScheme"
                        [gradient]="true"
                        [xAxis]="true"
                        [yAxis]="true"
                        [legend]="true"
                        [showXAxisLabel]="true"
                        [showYAxisLabel]="true"
                        [xAxisLabel]="'Country'"
                        [yAxisLabel]="'Population'">
                    </ngx-charts-bar-vertical>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Stacked Bar</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-bar-vertical-stacked
                        [results]="multi"
                        [scheme]="colorScheme"
                        [gradient]="true"
                        [xAxis]="true"
                        [yAxis]="true"
                        [legend]="true"
                        [showXAxisLabel]="true"
                        [showYAxisLabel]="true"
                        [xAxisLabel]="'Country'"
                        [yAxisLabel]="'Population'">
                    </ngx-charts-bar-vertical-stacked>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Pie</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-pie-chart
                        [results]="single"
                        [scheme]="colorScheme"
                        [gradient]="true"
                        [labels]="true"
                        [legend]="true"
                        [doughnut]="false">
                    </ngx-charts-pie-chart>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Pie Grid</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-pie-grid
                        [results]="single"
                        [scheme]="colorScheme">
                    </ngx-charts-pie-grid>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="24">
        <nz-card>
            <ng-template #title>Advanced Pie</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-advanced-pie-chart
                        [results]="single"
                        [scheme]="colorScheme"
                        [gradient]="true">
                    </ngx-charts-advanced-pie-chart>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Line</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-line-chart
                        [results]="multi"
                        [scheme]="colorScheme"
                        [gradient]="true"
                        [xAxis]="true"
                        [yAxis]="true"
                        [legend]="true"
                        [showXAxisLabel]="true"
                        [showYAxisLabel]="true"
                        [xAxisLabel]="'Country'"
                        [yAxisLabel]="'Population'"
                        [autoScale]="true">
                    </ngx-charts-line-chart>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Area</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-area-chart
                        [results]="multi"
                        [scheme]="colorScheme"
                        [gradient]="true"
                        [xAxis]="true"
                        [yAxis]="true"
                        [legend]="true"
                        [showXAxisLabel]="true"
                        [showYAxisLabel]="true"
                        [xAxisLabel]="'Country'"
                        [yAxisLabel]="'Population'"
                        [autoScale]="true">
                    </ngx-charts-area-chart>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Tree Map</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-tree-map
                        [results]="single"
                        [scheme]="colorScheme">
                    </ngx-charts-tree-map>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Number Card</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-number-card
                        [results]="single"
                        [scheme]="colorScheme">
                    </ngx-charts-number-card>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="16">
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Gauge</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-gauge
                        [results]="single"
                        [scheme]="colorScheme"
                        [min]="0"
                        [max]="100"
                        [angleSpan]="240"
                        [startAngle]="-120"
                        [units]="'alerts'"
                        [bigSegments]="10"
                        [smallSegments]="5">
                    </ngx-charts-gauge>
                </div>
            </ng-template>
        </nz-card>
    </div>
    <div nz-col [nzMd]="12">
        <nz-card>
            <ng-template #title>Linear Gauge</ng-template>
            <ng-template #body>
                <div style="height:250px;">
                    <ngx-charts-linear-gauge
                        [scheme]="colorScheme"
                        [value]="60"
                        [previousValue]="80"
                        [min]="0"
                        [max]="100"
                        [units]="'alerts'">
                    </ngx-charts-linear-gauge>
                </div>
            </ng-template>
        </nz-card>
    </div>
</div>
